<template>
  <div
    class="video"
    :style="{height: height}"
    @mouseleave.stop="handlePause"
    @click.stop="handlePause"
    @dblclick.stop.prevent="handleDblclick"
  >
    <video
      ref="videoRef"
      :controls="controls"
      :src="src"
      preload="metadata"
      @loadedmetadata="getMetaData"
    ></video>
    <div class="video-backdrop">
      <div v-if="!playing && showMetaData" class="video-meta">
        <div class="video-meta-item">{{ metaData.duration }}</div>
        <div class="video-meta-item">{{ metaData.videoWidth }}x{{ metaData.videoHeight }}</div>
      </div>

      <div v-if="!playing" class="video-handler">
        <span v-if="showPlay" @click.stop="handlePlay"><SvgIcon :style="{fontSize: iconSize}" name="play" /></span>
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  onUnmounted,
} from 'vue';

export default defineComponent({
  name: 'VideoItem',
  components: {},
  props: {
    showMetaData: {
      type: Boolean,
      default: false,
    },
    controls: {
      type: Boolean,
      default: true,
    },
    showPlay: {
      type: Boolean,
      default: true,
    },
    src: {
      type: String,
      default: '',
    },
    height: {
      type: String,
      default: '',
    },
    iconSize: {
      type: String,
      default: '',
    }
  },
  setup() {
    const state = reactive({
      videoRef: null,
      playing: false, // 正在播放
      metaData: {
        duration: '00 : 00',
        videoWidth: 0,
        videoHeight: 0,
      },
    });

    // 开始播放
    let handlePlay = () => {
      state.playing = true;
      state.videoRef.play();
    };

    // 暂停播放
    let handlePause = () => {
      state.playing = false;
      state.videoRef.pause();
    };

    // 双击全屏播放
    let handleDblclick = () => {
      if (state.videoRef.requestFullscreen) {
        state.videoRef.requestFullscreen();
      } else if (state.videoRef.webkitRequestFullscreen) {
        state.videoRef.webkitRequestFullscreen();
      } else if (state.videoRef.mozRequestFullScreen) {
        state.videoRef.mozRequestFullScreen();
      } else if (state.videoRef.msRequestFullscreen) {
        state.videoRef.msRequestFullscreen();
      }
    };

    onUnmounted(() => {
      handlePlay = null;
      handlePause = null;
      handleDblclick = null;
    });

    const getMetaData = e => {
      const duration = parseFloat(e.target.duration);

      state.metaData.duration = `${Math.floor(duration / 60).toString().padStart(2, '0')} : ${Math.floor(duration % 60).toString().padStart(2, '0')}`;
      state.metaData.videoWidth = e.target.videoWidth;
      state.metaData.videoHeight = e.target.videoHeight;
    };

    return {
      ...toRefs(state),
      handlePlay,
      handlePause,
      handleDblclick,
      getMetaData,
    };
  },
});
</script>

<style lang="scss" scoped>
.video {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100%;
  background-color: gray;

  video {
    display: block;
    width: 100%;
    height: auto;
  }

  &:hover video {
    width: auto;
    height: 100%;
  }

  .video-meta,
  .video-handler,
  .video-backdrop {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .video-backdrop {
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
  }

  .video-meta {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;

    > .video-meta-item {
      margin: 10px;
      padding: .1em .5em;
      background-color: rgba(0, 0, 0, .38);
      border: 1px solid rgba(255,255,255,0.8);
      border-radius: $border-radius-small;
      font-size: 12px;
      color: $color-white;
    }
  }

  .video-handler {
    display: flex;
    justify-content: center;
    align-items: center;

    > span {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px;
      cursor: pointer;
    }
  }
}
</style>
